<!--信息提交-->
<template>
  <div class="app-container  informationSubmit-contaienr">
    <div class="submit-header">
      <el-link type="primary" :underline="false" @click="handleOpenMyInfomation">我的填报</el-link>
    </div>
    <el-card v-for="form in businessForms" :key="form.id" class="common-el-card m-b-15">
      <div slot="header" class="title">
        <span>{{ form.label }}</span>
      </div>
      <c-list
        :data-source="form.children"
        layout="horizontal"
        :split="false"
        :gutter="5"
        item-width="90px"
        :item-between="true"
        class="form-list-container"
        item-layout="vertical">
        <template #item="{item}">
          <div class="form-item" @click="fillFormInformation(item.id)">
            <div class="icon">
              <img :src="common.getFileView(item.icon)" class="common-round-image-32" @error="handleImageError">
            </div>
            <div class="title">{{ item.label }}</div>
          </div>
        </template>
      </c-list>
    </el-card>
    <model-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      @close="dialogVisible=!dialogVisible">
      <div style="padding:20px 0">
        <form-create
          ref="formCreater"
          v-model="formCreate"
          :rule="rule"
          :option="option"
          :value.sync="value" />
      </div>
      <template slot="footer">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </model-dialog>
    <side-box :show="myInfomationShow" title="我的填报记录" class="side-modal-box-full" @close="myInfomationShow=!myInfomationShow">
      <template slot="body">
        <myInformationSubmit ref="myInformationSubmit" />
      </template>
    </side-box>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import myInformationSubmit from './myInformationSubmit.vue'
export default {
  components: { myInformationSubmit },
  data() {
    return {
      flowId: null,
      businessForms: [],
      formDetails: {},
      dialogTitle: '',
      dialogVisible: false,
      formCreate: {},
      value: {},
      rule: [],
      option: {
        submitBtn: false,
        onSubmit: function(formData) {
        }
      },
      myInfomationShow: false
    }
  },
  created() {
    this.fetchForms()
  },
  methods: {
    fetchForms() {
      this.$store.dispatch('businessFormTree').then((res) => {
        this.businessForms = res
      }).catch((_) => {})
    },
    fillFormInformation(id) {
      this.flowId = ''
      this.$store.dispatch('businessFormGetById', id).then((res) => {
        this.formDetails = res
        this.dialogTitle = `【${res.name}】信息填报`
        if (res.formOptions) {
          this.option = JSON.parse(res.formOptions)
        } else {
          this.option = {}
        }
        if (res.formContent) {
          this.dialogVisible = true
          res.formContent = res.formContent.replaceAll('${fileServer}', this.$FILE_SERVER + 'file/upload?catalogId=' + this.constants.FILE_CATALOG_FORM_DESIGN)
          res.formContent = res.formContent.replaceAll('${ProjectsId}', this.constants.PROJECTS_ID)
          res.formContent = res.formContent.replaceAll('${Access-Token}', getToken())
          this.rule = JSON.parse(res.formContent)
        } else {
          this.msgWarning('暂未设置提交表单')
        }
        // this.$refs.formDesigner.setRule(JSON.parse(res.formContent))
      }).catch((_) => {})
    },
    handleSubmit() {
      this.formCreate.validate((validate) => {
        if (validate) {
          this.formCreate.submit((formData) => {
            this.$store.dispatch('businessFormValueSave', {
              formId: this.formDetails.id,
              formValue: JSON.stringify(formData)
            }).then(response => {
              this.dialogVisible = false
              this.$alert('信息提交成功,可在右上角《我的填报》查看提交记录!', '提交成功', {
                confirmButtonText: '确定',
                callback: action => {
                }
              })
            }).catch(() => {
              this.dialogVisible = true
            })
          })
        }
      })
    },
    handleOpenMyInfomation() {
      this.myInfomationShow = true
      this.$nextTick(() => {
        this.$refs.myInformationSubmit.handleReset()
      })
    }

  }
}
</script>
  <style rel="stylesheet/scss" lang="scss" scoped>
  .informationSubmit-contaienr{
    display: block;
    .submit-header{
      text-align: right;
      height: 30px;
    }
    .form-list-container{
      .form-item{
        text-align: center !important;
        cursor: pointer;
        justify-content: center;
        display: flex;
        flex-direction:column;
        .title{
          margin-top: 10px;
        }
      }
    }
  }
  </style>

